import { ProForm, ProFormDependency, ProFormRadio, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-components"
import { useDictOptions } from "@/hooks"
const DataSourceForm = () => {
  let { data: typeOptions } = useDictOptions('data_source_type')
  return <>
    <ProForm.Item name='id' hidden></ProForm.Item>

    <ProFormText
      colProps={{ lg: 12, md: 12, sm: 24 }}
      name="dataSourceName"
      label="数据源名称"
      placeholder="请输入数据源名称"
      rules={[{ required: true, message: '请输入数据源名称' }]}
    />

    <ProFormSelect
      colProps={{ lg: 12, md: 12, sm: 24 }}
      name="dataSourceType"
      label="数据源类型"
      placeholder="请选择数据源类型"
      rules={[{ required: true, message: '请选择数据源类型' }]}
      options={typeOptions}
    />
    <ProFormText
      colProps={{ lg: 12, md: 12, sm: 24 }}
      name="hostIp"
      label="主机IP"
      placeholder="请输入主机IP"
      rules={[
        { required: true, message: '主机IP不能为空' },
        {
          pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
          message: "格式不正确！"
        }
      ]}
    />
    <ProFormText
      colProps={{ lg: 12, md: 12, sm: 24 }}
      name="port"
      label="端口"
      placeholder="请输入端口"
      rules={[
        { required: true, message: '端口号不能为空' },
        {
          pattern: /^[1-9]\d*$/,
          message: '请输入有效的端口号!',
        }
      ]}
    />

    <ProFormText
      colProps={{ lg: 12, md: 12, sm: 24 }}
      name="databaseName"
      label="数据库名"
      placeholder="请输入数据库名"
      rules={[{ required: true, message: '数据库名不能为空' }]}
    />
    <ProFormDependency name={['dataSourceType']}>
      {({ dataSourceType }) => {
        return <ProFormText
          colProps={{ lg: 12, md: 12, sm: 24 }}
          name="username"
          label="用户名"
          placeholder="请输入用户名"
          rules={[{ required: dataSourceType !== "REDIS", message: '用户名不能为空' }]}
        />
      }}
    </ProFormDependency>

    <ProFormDependency name={['dataSourceType']}>
      {({ dataSourceType }) => {
        return <ProFormText
          colProps={{ lg: 12, md: 12, sm: 24 }}
          name="password"
          label="密码"
          placeholder="请输入密码"
          rules={[{ required: dataSourceType !== "REDIS", message: '密码不能为空' }]}
        />
      }}
    </ProFormDependency>


    <ProFormTextArea
      rows={4}
      name="describe"
      label="描述"
      placeholder="请输入内容"
    />
  </>
}



export default DataSourceForm